<template>
  <div class="dayComp" id="dayComp">
    <el-collapse class="my-collapse" v-model="activeName" @change="dayCollapseChange">
      <!-- day -->
      <el-collapse-item
        v-for="(dayItem, dayIndex) in day"
        :key="dayIndex"
        :title="`第${dayIndex+1}天`"
        :name="'dayItem'+dayIndex"
      >
        <div class="everyDayBox">
          <el-form :model="dayItem" :ref="'day'+dayIndex" label-width="150px" class="demo-dynamic">
            <el-form-item :label="dayItem.label" :rules="dayItem.rules" prop="summary" v-if="mainOption.summary===''||mainOption.summary?true:false">
              <!-- :key="formIndex"   'dayData.'+dayIndex+'.summary' :prop="'dayData.'+dayIndex+'.summary'" -->
              <!-- 每天的summary formItem.val  v-for="(formItem, formIndex) in Form.dayData"    'dayData.'+formIndex+'.val'-->
              <el-input
                size="mini"
                v-if="dayItem.type === 'areaInput'"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 6}"
                placeholder="请输入内容"
                v-model="dayItem.summary"
                :maxlength="dayItem.option.max"
                show-word-limit
                :disabled="mainOption.operate==='show'?true:false"
              ></el-input>
            </el-form-item>
            <!-- 游玩点 -->
            <!-- {{dayItem.point}} -->
            <div class="dayinPoint" v-if="dayItem.point?(dayItem.point.length>0?true:false):false">
              <el-form-item label="游玩点">
                <el-collapse class="my-collapse" v-model="pointName">
                  <el-collapse-item
                    v-for="(pointItem, pointIndex) in dayItem.point"
                    :key="pointIndex"
                    :title="`第${pointIndex+1}个点`"
                    :name="'day'+dayIndex+'point'+pointIndex"
                  >
                    <data-content
                      :ref="`day${dayIndex}point${pointIndex}`"
                      :obj-data="pointItem"
                      :point-index="pointIndex"
                      :day-index='dayIndex'
                      :day-comp-cropper-option="dayCompCropperOption"
                      :point-in-resource-data="pointInResourceData"
                      :main-option="mainOption"
                      :point-resource-option="pointResourceOption"
                    ></data-content>
                  </el-collapse-item>
                </el-collapse>
              </el-form-item>
            </div>
          </el-form>
          <!-- 图文和资源选择 -->
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
// const imgText = require("./img-text.vue");
module.exports = {
  data() {
    return {
      appendToBody: false,
      // 点的折叠面板
      pointName: [],
      // day的折叠面板
      activeName: []
    };
  },
  created() {
    this.$watch(
      () => {
        // console.log(this.day, "this.day");
        const result =
          this.day.length > 0 ? this.day[this.dayIndex].point : this.day;
        return result;
      },
      (now, old) => {
        this.pointName.push(
          `day${this.dayIndex}point${this.day[this.dayIndex].point.length - 1}`
        );
      }
    );
  },
  props: {
    pointResourceOption: {
      type: Object,
      defalut: () => {
        return {}
      }
    },
    mainOption: {
      type: Object,
      defalut: () => {
        return {}
      }
    },
    pointInResourceData: {
      type: Array,
      defalut: () => {
        return [];
      }
    },
    dayCompCropperOption: {
      type: Object,
      defalut: () => {
        return {};
      }
    },
    dayIndex: {
      type: Number,
      defalut: 0
    },
    day: {
      defalut: [],
      type: Array
    }
  },
  watch: {
    day: {
      handler(nowDay, oldDay) {
        this.activeName.push(`dayItem${nowDay.length - 1}`);
        // this.pointName.push(`day${this.dayIndex}point${(this.day[this.dayIndex].point.length)-1}`)
        console.log(this.activeName, this.pointName, "this.dayIndex");
      }
    }
  },
  components: {
    "data-content": httpVueLoader("./content.vue"),
    "resource-comp": httpVueLoader("./resourceComp.vue")
  },
  methods: {
    runDayForm() {
      let arr = [];
      let pointArr = [];
      let that = this;
      this.day.map((dayItem, dayIndex) => {
        arr.push(allCheckRules(that, "day" + dayIndex, dayIndex + 1));
        let point = dayItem.point ? dayItem.point : [];
        point.map((pointItem, pointIndex) => {
          pointArr.push(
            this.$refs[`day${dayIndex}point${pointIndex}`][0].runPointForm()
          );
        });
      });
      // 检查day
      Promise.all(arr.concat(pointArr))
        .then(function() {
          //都通过了
          console.log("yyes");
        })
        .catch(err => {
          this.day.map((dayItem, dayIndex) => {
            this.activeName =
              typeof this.activeName === "number" ? [] : this.activeName;
            const checkResult = this.activeName.some((value, index, array) => {
              return value === "dayItem" + dayIndex;
            });
            this.activeName = checkResult
              ? this.activeName
              : this.activeName.concat(["dayItem" + dayIndex]);
            let point = dayItem.point ? dayItem.point : [];
            point.map((pointItem, pointIndex) => {
              const checkResultPoint = this.activeName.some(
                (value, index, array) => {
                  return value === "day" + dayIndex + "point" + pointIndex;
                }
              );
              this.pointName = checkResultPoint
                ? this.pointName
                : this.pointName.concat([
                    "day" + dayIndex + "point" + pointIndex
                  ]);
            });
          });
          this.$message({ message: "请填写完整信息", type: "warning" });
          console.log("err", this.activeName);
        });
      // 检查point
      // Promise.all(pointArr)
      //   .then(function() {
      //     //都通过了
      //     console.log("yyes");
      //   })
      //   .catch(err => {
      //     this.activeName =
      //       typeof this.activeName === "number" ? [] : this.activeName;
      //     const checkResultPoint = this.activeName.some(
      //       (value, index, array) => {
      //         return value === "day" + dayIndex + "point" + pointIndex;
      //       }
      //     );
      //     this.activeName = checkResultPoint
      //       ? this.activeName
      //       : this.activeName.concat(["day" + dayIndex + "point" + pointIndex]);
      //     this.$message({ message: "请填写完整信息", type: "warning" });
      //     console.log("err");
      //   });
      return arr.concat(pointArr);
    },
    transmitImgTextData() {},
    transmitChangeArr(arr, dayIndex, pointIndex) {
      console.log(arr, pointIndex, "arr, pointIndex");
      this.day[dayIndex].point[pointIndex].resources = arr;
      // console.log(this.day[dayIndex].point[pointIndex], 'this.day.point')
    },
    pointIMgClick() {},
    stepConDel() {},
    pointTextClick(val, dayIndex, pointIndex, stepConIndex) {
      // this.day[dayIndex].point[pointIndex].content[stepConIndex].val = val
    },
    replaceN(str) {
      if (str) {
        return str.replace(/\n/g, "<br>");
      }
    },
    dayCollapseChange(activeName) {
      this.$emit("transmit-day-collapse-change", activeName);
    }
  }
};
</script>
<style scoped>
.dayComp {
  width: 90%;
}
.my-collapse .el-collapse-item__header {
  margin-left: 30px;
}
.dayinPoint {
  /* border: 1px solid seagreen; */
}
#dayComp .el-collapse-item__header{
  background-color: transparent;
}
#dayComp .el-collapse-item__wrap{
  background-color: transparent;
}
</style>